/**
 * Description
 *
 * Creation Date 25/12/2017
 * @author Candy
 */
import React, { PureComponent } from 'react'
import {
	StyleSheet,
	View,
	Image,
	TouchableHighlight,
	TouchableOpacity,
	Platform,
	FlatList,
	TextInput,
	Text
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';
import { screen, color } from '../../utils';
import { ImageSwiper, TextTool } from '../../components';
import { getHomeBanner, categories, product } from '../../api';
import { setStore, getStore, removeStore } from '../../utils/tools';
import FiterList from './FilterList';
import ProductList from '../../components/ProductList'

export default class Category extends PureComponent {
	static navigationOptions = ({ navigation }) => ({
		headerTitle: (
			<TouchableOpacity style={ styles.gridContainer }>
				<Image resizeMode='stretch' source={{uri: 'https://4eb7f3de389ff6b61816-1dd1d9fd8ad438da629d92a7640b81cb.ssl.cf1.rackcdn.com/GDR2016/GDR477/DESKTOP/Ten_Years_Logo_9.png?param=100y20'}}
					   style={{width: screen.width/2.5, height: 30, marginTop: 5}} />
			</TouchableOpacity>
		),
		headerStyle: {
			backgroundColor: color.white
		}
	});

	constructor(props) {
		super(props);
		this.state ={
			productList: [],
			refreshing: true
		}
	}

	componentWillMount() {
		this.initData();
	}

	initData = () => {
		try {
			product().then( res => {
				const products =[];
				products.push({
					title: 'Category List',
					data: res.data
				})
				this.setState({
					productList: [...products],
					refreshing: false
				})
			})
		} catch (err) {
			console.log(err);
		}
	}

	renderItem = ({item, index}) => (
		<ProductList productList={item.data} title={item.title} navigation={this.props.navigation} />
	);

	render () {
		const { productList, refreshing } = this.state;
		return (
			<View style={styles.container}>
				{/*<FiterList/>*/}
				<FlatList
					data = {productList}
					refreshing = {refreshing}
					onRefresh={this.initData}
					keyExtractor={(item, index) => index}
					renderItem = {this.renderItem}
					ListFooterComponent={() => <Text style={{textAlign: 'center', padding: 10, transform: [{scale: 0.857143}]}}>已加载完全部数据</Text>}
				/>
			</View>
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	gridContainer: {
		flex: 1,
		height: 35,
		flexDirection: 'row',
		flexWrap: 'wrap',
		justifyContent: 'space-between'
	}
});